<template>
  <div>
    <header>
      <div>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-menu
                :default-active="activeIndex"
                class="el-menu-index"
                mode="horizontal"
                @select="handleSelect"
                active-text-color="#ffd04b"
              >
                <el-menu-item v-for="(key,index) in forMemItem" :key="index"></el-menu-item>

                <el-menu-item index="1">
                  <nuxt-link to="/">
                    <el-image style="width: 80px; height: 40px" :src="url" :fit="fit"></el-image>
                  </nuxt-link>
                </el-menu-item>
                <el-menu-item index="2">
                  <i class="el-icon-location"></i>
                  <nuxt-link to="/">首页</nuxt-link>
                </el-menu-item>
                <el-menu-item index="3">最美味得</el-menu-item>
                <el-menu-item index="4">最好玩得</el-menu-item>
                <el-menu-item index="5">
                  <i class="el-icon-reading"></i>社区讨论
                </el-menu-item>
                <el-menu-item index="6">
                  <i class="el-icon-loading"></i>加入我们
                </el-menu-item>
                <el-menu-item index="7">
                  <el-avatar :size="40" :src="circleUrl"></el-avatar>
                  <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">
                      个人中心
                      <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="a">
                        <i class="el-icon-s-flag"></i>&nbsp;最新推荐
                      </el-dropdown-item>
                      <el-dropdown-item command="b">
                        <i class="el-icon-more"></i>&nbsp;最新消息
                      </el-dropdown-item>
                      <el-dropdown-item command="c">
                        <i class="el-icon-camera-solid">&nbsp;</i>我的动态
                      </el-dropdown-item>
                      <el-dropdown-item command="d" disabled>
                        <i class="el-icon-camera-solid"></i>&nbsp;正在维护
                      </el-dropdown-item>
                      <el-dropdown-item command="e" divided>
                        <i class="el-icon-edit-outline"></i>&nbsp;修改资料
                      </el-dropdown-item>
                      <el-dropdown-item command="f" divided>
                        <i class="el-icon-video-pause"></i>&nbsp;&nbsp;&nbsp;退出
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-menu-item>
              </el-menu>
            </div>
          </el-col>
        </el-row>
      </div>
    </header>
    <!--全局路由部分-->
    <nuxt />
    <footer>
      <div>
        <div class="grid-content bg-purple-light">
          <el-row>
            <el-col :span="8">
              <div>&nbsp;</div>
            </el-col>
            <el-col :span="3">
              <div>
                <el-link icon="el-icon-edit">关于我们</el-link>
              </div>
            </el-col>
            <el-col :span="3">
              <div>
                <el-link icon="el-icon-question">意见建议</el-link>
              </div>
            </el-col>
            <el-col :span="3">
              <div>
                <el-link icon="el-icon-user-solid">合作意向</el-link>
              </div>
            </el-col>
            <el-col :span="7">
              <div></div>&nbsp;
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div>&nbsp;</div>
            </el-col>
            <el-col :span="3">
              <div><el-link icon="el-icon-phone" >联系我们</el-link></div>
            </el-col>
            <el-col :span="6">
              <div ><a>特别感谢</a><i class="el-icon-view el-icon--right"></i> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://element.eleme.cn">UI开发团队</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://vuejs.org/">MVVM架构团队</a></div>
            </el-col>
           
            <el-col :span="7">
              <div></div>&nbsp;
            </el-col>
          </el-row>

          <el-row align="center">
            <el-col :span="24">
              <div style="background:#303643">
                <b style="padding-left: 30%">
                  <font color="white">
                    该网站出品与:&nbsp;&nbsp;&nbsp;
                    <i class="el-icon-share"></i>&nbsp;&nbsp;&nbsp;XA_Drunk the money
                  </font>
                </b>
                <span v-for="(key,index) in 30" :key="index">&nbsp;&nbsp;&nbsp;</span>
                <el-link
                  href="https://gitee.com/yanIcloud/nuxt-dev"
                  type="primary"
                >gitee source code</el-link>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </footer>
  </div>
</template>
<script>
import "element-ui/lib/theme-chalk/display.css";
export default {
  data() {
    return {
      activeIndex: "0",
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      //控制菜单循环次数
      forMemItem: 25,
      fit: "暂无"
    };
  },
  methods: {
    //这是用来菜单路由,目前这个方法暂未使用
    handleSelect(key, keyPath) {
      // console.log(key+"---"+keyPath);
    },
    //个人中心下拉对应的值
    handleCommand(command) {}
  },
  show(){
    alert('感谢');
  }
};
</script>

<style>
.el-row {
  margin-bottom: 40px;

}
.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>